<template>
  <ui-table
    :data="tableData"
    size="medium"
    ref="uiTable"
    border
    fit
    @selection-change="handleSelectionChange"
    :buttom-group="buttomGroup"
    :row-class-name="tableClass"
  >
    <!-- 多选框 -->
    <template v-if="isSelect">
      <ui-table-column type="selection" width="55"> </ui-table-column>
    </template>
    <template v-for="(item, index) in columns">
      <ui-table-column
        :column-key="index + ''"
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :key="index"
        :width="item.width"
        align="center"
        :formatter="item.formatter"
        v-if="!item.slots"
      ></ui-table-column>
      <ui-table-column
        :column-key="index + ''"
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :key="index"
        :width="item.width"
        align="center"
        :formatter="item.formatter"
        v-if="item.slots"
      >
        <template slot-scope="scope">
          <slot :name="item.slots.name" :scope="scope" :index="index" :column="item"></slot>
        </template>
      </ui-table-column>
    </template>
  </ui-table>
</template>

<script>
export default {
  name: 'comp-table',
  filters: {
    formatters(val, format) {
      if (typeof format === 'function') {
        return format(val);
      } else return val;
    },
  },
  props: {
    isSelect: {
      type: Boolean,
      default: false,
    },
    buttomGroup: {
      type: Array,
      default: function () {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    columns: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('multipleSelection', val);
    },
    clickMethods(methodsName, row) {
      this.$emit(methodsName.methodsName, row);
    },
    tableClass({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        //奇数行，序号不能被2整除
        return 'even-row';
      } else {
        return '';
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .even-row {
  background-color: #fbfcfd;
}
</style>
